<template>
  <div class="app-container">
    <template>
      <div class="right-detail">
        <!-- 顶部查询表单 -->
        <div class="cbox">
          <el-form
            class="form"
            :model="queryParam"
            :inline="true"
            ref="fltForm"
           
            label-position="right"
          >
            <!-- <el-row style="height:45px;"> -->
              <!-- <el-col :span="5"> -->
                <el-form-item label="需求编号:" prop="demandCode">
                  <el-input
                    clearable
                    maxlength="20"
                    v-model="queryParam.demandCode"
                    size="mini"
                    style="width: 180px"
                  ></el-input>
                </el-form-item>
              <!-- </el-col> -->
              <!-- <el-col :span="5"> -->
                <el-form-item label="运输类型:">
                  <el-select
                    v-model="queryParam.transportType"
                    placeholder="请选择"
                    filterable
                    clearable
                    size="mini"
                    style="width:180px;"
                  >
                    <el-option
                      v-for="(item, index) in bidTypeDataList"
                      :key="index"
                      :label="item.rvCmeaning"
                      :value="item.rvLowValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              <!-- </el-col> -->
              <!-- <el-col :span="5"> -->
                <el-form-item label="运输方式:">
                  <el-select
                    v-model="queryParam.transportMode"
                    placeholder="请选择"
                    filterable
                    clearable
                    style="width:180px;"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, index) in transportModeList"
                      :key="index"
                      :label="item.rvCmeaning"
                      :value="item.rvLowValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              <!-- </el-col> -->
              <!-- <el-col :span="7"> -->
                <el-form-item label="品种:">
                  <el-select
                    v-model="queryParam.kind"
                    placeholder="请选择"
                    filterable
                    clearable
                    style="width:180px;"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, index) in kindModeList"
                      :key="index"
                      :label="item.varName"
                      :value="item.varCode"
                    >
                      <span style="float: left">{{ item.varName }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                      >{{ item.dptName }}</span
                      >
                    </el-option>
                  </el-select>
                </el-form-item>
              <!-- </el-col> -->
            <!-- </el-row> -->
            <!-- <el-row style="height:45px;"> -->
              <!-- <el-col :span="5"> -->
                <el-form-item label="糖厂:" label-width="71px">
                  <el-select
                    v-model="queryParam.dptId"
                    placeholder="请选择"
                    filterable
                    clearable
                    style="width:180px;"
                    size="mini"
                  >
                    <el-option
                      v-for="item in sugarModeList"
                      :key="item.dptId"
                      :label="item.dptName"
                      :value="item.dptId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              <!-- </el-col> -->
              <!-- <el-col :span="8"> -->
                <el-form-item prop="submitStartTime" label="提交时间:">
                  <el-date-picker
                    size="mini"
                    v-model="queryParam.submitStartTime"
                    type="datetime"
                    placeholder="请选择开始时间"
                    style="width:180px;"
                  ></el-date-picker
                  >
                  —
                  <el-date-picker
                    size="mini"
                    v-model="queryParam.submitEndTime"
                    type="datetime"
                    placeholder="请选择结束时间"
                    style="width:180px;"
                  ></el-date-picker>
                </el-form-item>
              <!-- </el-col> -->
              <!-- <el-col :span="2"> -->
                <el-form-item size="mini" label-width="10px">
                  <el-button size="mini" type="primary" @click="initMTable"
                  >查询
                  </el-button
                  >
                </el-form-item>
              <!-- </el-col> -->
            <!-- </el-row> -->
          </el-form>
        </div>
        <!-- 主页主体表格 -->
        <split-pane
          split="horizontal"
          :default-percent="55"
          v-on:resize="resize"
        >
          <template slot="paneL">
            <div class="top-type" ref="topType">
              <div class="btn-area" ref="btnArea">
                <buttonName @clickEvent="clickEvent"></buttonName>
                <!--                <el-button-->
                <!--                  plain-->
                <!--                  size="mini"-->
                <!--                  type="primary"-->
                <!--                  v-if="isAuth('confirm')"-->
                <!--                  @click="confirm"-->
                <!--                >需求确认-->
                <!--                </el-button-->
                <!--                >-->
                <!--                <el-button-->
                <!--                  plain-->
                <!--                  size="mini"-->
                <!--                  type="primary"-->
                <!--                  v-if="isAuth('unConfirm')"-->
                <!--                  @click="unConfirm"-->
                <!--                >取消确认-->
                <!--                </el-button>-->
                <!--                <el-button-->
                <!--                  plain-->
                <!--                  size="mini"-->
                <!--                  type="primary"-->
                <!--                  v-if="isAuth('unconfirm')"-->
                <!--                  @click="refuse"-->
                <!--                >需求驳回-->
                <!--                </el-button>-->
              </div>
              <el-table
                :height="typeHeight"
                style="width: 100%"
                :data="demandTable.data"
                highlight-current-row
                @row-click="demandTableRowClick"
                @select-all="demandTableSelect"
                @selection-change="demandTableSelect"
                border
                :header-cell-style="{ textAlign: 'center' }"
              >
                <el-table-column
                  align="center"
                  width="60"
                  label="序号"
                  type="index"
                ></el-table-column>
                <el-table-column
                  type="selection"
                  align="center"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="需求状态"
                  prop="statusValue"
                  width="100"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="需求编号"
                  prop="demandCode"
                  width="160"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="品牌"
                  prop="goodBrand"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="规格"
                  prop="dailyOutput"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="产品大类"
                  prop="projuctBig"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="品种"
                  prop="kind"
                  width="140"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="运输数量(吨)"
                  prop="transportQuantity"
                  width="140"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="运输方式"
                  prop="transportMode"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="结算方式"
                  prop="settlementWay"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="履约保证金"
                  prop="performanceBond"
                  width="130"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="要求开始时间"
                  width="120"
                  prop="requiredStartTime"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="要求完成天数"
                  prop="requiredEndDay"
                  width="130"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="提交人"
                  prop="sfdSubmitter"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="提交时间"
                  prop="sfdSubmitTime"
                  width="160"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="备注"
                  prop="remark"
                ></el-table-column>
              </el-table>
              <el-pagination
                class="pagination"
                small
                background
                ref="pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="Pagination.currentPage"
                :page-sizes="Pagination.pageSizeList"
                :page-size="Pagination.pageSize"
                :layout="Pagination.layout"
                :total="Pagination.total"
              ></el-pagination>
            </div>
          </template>

          <!-- 下方解决方案明细表格 -->
          <template slot="paneR">
            <div class="codeNumberCode" style="background-color: #fff;">
              线路信息
            </div>
            <div
              class="bottom-code"
              ref="bottomCode"
              style="background-color: #fff;"
            >
              <el-table
                :data="lineTable.data"
                border
                :height="detlHeight"
                :header-cell-style="{ textAlign: 'center' }"
                highlight-current-row
              >
                <el-table-column
                  type="index"
                  align="center"
                  width="60"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="起始地"
                  prop="dliSProvinceName,dliSCtiyeName,dliSCityName,site"
                >
                  <template slot-scope="scope"
                  >{{ scope.row.dliSProvinceName }}
                    {{ scope.row.dliSCtiyeName }} {{ scope.row.dliSCityName }}
                    {{ scope.row.site }}
                  </template
                  >
                </el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  label="目的地"
                  prop="dliDProvinceName,dliDCtiyeName,dliDCityName,destination"
                >
                  <template slot-scope="scope"
                  >{{ scope.row.dliDProvinceName }}
                    {{ scope.row.dliDCtiyeName }} {{ scope.row.dliDCityName }}
                    {{ scope.row.destination }}
                  </template
                  >
                </el-table-column>
              </el-table>
            </div>
          </template>
        </split-pane>
      </div>
    </template>

    <!-- 驳回需求dialog -->
    <el-dialog
      v-dialogDrag
      :title="refuseDialog.title"
      :visible.sync="refuseDialog.show"
      width="30%"
      v-el-drag-dialog
      destroy-on-close
      :close-on-click-modal="false"
      top="30vh"
      @close="refuseClose"
    >
      <el-form
        :model="refuseFrom.data"
        :rules="refuseFrom.rules"
        ref="refuseFromRef"
      >
        <el-form-item prop="refuseMsg">
          <el-row>
            <el-col :span="24">
              <el-input
                v-model="refuseFrom.data.refuseMsg"
                type="textarea"
                placeholder="请输入驳回意见"
                maxlength="200"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button plain size="mini" type="primary" @click="refuseClose"
        >关闭</el-button
        >
        <el-button size="mini" type="primary" @click="refuseConfirm"
        >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import isAuth from '@/mixins/buttonAuth'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import store from '@/store'
import {bidDropDown, confirmDemand, kindType, quertLineInfo, queryConfirmDemand, refuseDemand, sugarType} from '@/request/api'
import buttonName from '@/components/buttonName/button-name'

export default {
  mixins: [resizeMixin, isAuth, paginationMixin],
  data() {
    return {
      bidTypeDataList: [], // 标的类型 运输类型  下拉
      bidStatusDataList: [], //
      bidQuotations: [], // 竞价方式下拉
      transportModeList: [], // 运输方式下拉
      kindModeList: [], // 品种下拉
      productModeList: [], // 产品大类下拉
      sugarModeList: [], // 糖厂下拉
      demandStatus: [], // 需求状体下拉
      detlHeight: -1, // 主页下方 表格高度
      typeHeight: -1, //主页上方 表格高度
      // 需求驳回dialog
      refuseDialog: {
        show: false,
        title: '',
        currentData: {}
      },
      // 页面查询
      queryParam: {
        demandCode: '',
        transportType: '',
        dptId: '',
        transportMode: '',
        site: '',
        kind: '',
        product: '',
        submitStartTime: '',
        submitEndTime: '',
        group: ''
      },
      demandTable: {
        data: [],
        currentData: {},
        selectAll: [],
        selectCommit: [],
        selectUnCommit: []
      },
      lineTable: {
        data: []
      },
      refuseFrom: {
        data: {
          refuseMsg: ''
        },
        rules: {
          refuseMsg: [
            {required: true, message: '请输入驳回意见', trigger: 'blur'}
          ]
        }
      }
    }
  },
  components: {
    buttonName
  },
  created() {
    this.resize = () => {
      this.typeHeight = this.$refs.topType.offsetHeight - 80
      this.detlHeight = this.$refs.bottomCode.offsetHeight - 80
    }
  },
  mounted() {
    this.initMTable()
    this.initTransportModeList()
    this.initBidType()
    this.initKindList()
    this.initProductList()
    this.initSugarList()
  },
  methods: {
    // 初始化主表
    initMTable() {
      queryConfirmDemand({
        demandCode: this.queryParam.demandCode,
        status: this.queryParam.status,
        index: this.Pagination.currentPage,
        size: this.Pagination.pageSize,
        transportType: this.queryParam.transportType,
        transportMode: this.queryParam.transportMode,
        kind: this.queryParam.kind,
        dptId: this.queryParam.dptId,
        startTime: this.queryParam.submitStartTime,
        endTime: this.queryParam.submitEndTime
      }).then(res => {
        this.demandTable.data = res.data
        this.updatePaginationTotal(res.total)
      })
    },
    getList() {
      this.initMTable()
    },
    // 运输方式下拉
    initTransportModeList() {
      bidDropDown({
        name: '运输类型'
      }).then(res => {
        this.transportModeList = res.data
      })
    },
    // 标的类型下拉框
    initBidType() {
      bidDropDown({
        name: '标的类型'
      }).then(res => {
        if (res.success == 1) {
          this.bidTypeDataList = res.data
        }
      })
    },
    // 品种下拉
    initKindList() {
      kindType({
        preDptId: store.state.user.DPTID_DX_H
      }).then(res => {
        if (res.success == 1) {
          this.kindModeList = res.data
        }
      })
    },
    // 产品大类下拉
    initProductList() {
      bidDropDown({
        name: '产品大类'
      }).then(res => {
        if (res.success == 1) {
          this.productModeList = res.data
        }
      })
    },
    // 糖厂下拉
    initSugarList() {
      sugarType({
        dptPredptId: store.state.user.DPTID_DX_H
      }).then(res => {
        this.sugarModeList = res.data
      })
    },
    // 初始化线路信息
    initLineTable() {
      quertLineInfo({
        sugarId: this.demandTable.currentData.sugarId
      }).then(res => {
        this.lineTable.data = res.data
      })
    },
    // 需求确认
    confirm() {
      if (this.demandTable.selectAll.length == 0) {
        this.$message.error('请至少勾选一条数据')
        return
      }
      if (this.demandTable.selectCommit.length != 0) {
        this.$message.error('请选择未审核的数据')
        return
      }
      confirmDemand({
        list: this.demandTable.selectUnCommit,
        status: 'JTSH'
      }).then(() => {
        this.$message.success('成功')
        this.initMTable()
      })
    },
    // 取消确认
    unConfirm() {
      if (this.demandTable.selectAll.length == 0) {
        this.$message.error('请至少勾选一条数据')
        return
      }
      if (this.demandTable.selectUnCommit.length != 0) {
        this.$message.error('请选择已审核的数据')
        return
      }
      confirmDemand({
        list: this.demandTable.selectCommit,
        status: 'YFB'
      }).then(() => {
        this.$message.success('取消成功')
        this.initMTable()
      })
    },
    demandTableRowClick(val) {
      this.demandTable.currentData = val
      this.initLineTable()
    },
    demandTableSelect(val) {
      if (val.length != 0) {
        this.demandTable.selectCommit.length = 0
        this.demandTable.selectUnCommit.length = 0
        this.demandTable.selectAll = val
        val.forEach(v => {
          if (v.status == 'JTSH') {
            this.demandTable.selectCommit.push(v)
          }
          if (v.status == 'YFB') {
            this.demandTable.selectUnCommit.push(v)
          }
        })
      }
    },
    // 驳回需求按钮
    refuse() {
      if (Object.keys(this.demandTable.currentData).length == 0) {
        this.$message.error('至少选择一条数据')
        return
      }
      if (this.demandTable.currentData.status == 'JTSH') {
        this.$message.error('已经确认的无法驳回')
        return
      }
      this.refuseDialog.currentData = this.demandTable.currentData
      this.refuseDialog.title = '驳回'
      this.refuseDialog.show = true
    },
    // 驳回确认
    refuseConfirm() {
      this.$refs['refuseFromRef'].validate(valid => {
        if (valid) {
          refuseDemand({
            demandCode: this.refuseDialog.currentData.demandCode,
            sfdRefuseMsg: this.refuseFrom.data.refuseMsg,
            status: 'BOH',
            sugarId: this.refuseDialog.currentData.sugarId
          }).then(() => {
            this.$message.success('驳回成功')
            this.refuseClose()
          })
        }
      })
    },
    // 驳回取消
    refuseClose() {
      this.refuseDialog.currentData = {}
      this.refuseFrom.data.refuseMsg = ''
      this.$refs['refuseFromRef'].resetFields()
      this.refuseDialog.show = false
      this.demandTable.currentData = {}
      this.initMTable()
    },
    clickEvent(val) {
      if (val.mdlCode === 'confirm') {
        this.confirm()
      }
      if (val.mdlCode === 'unConfirm') {
        this.unConfirm()
      }
      if (val.mdlCode === 'unconfirm') {
        this.refuse()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .app-container {
    overflow: hidden;
    background-color: #fff;
    position: relative;
    height: 100%;
  }

  .right-detail {
    height: 100%;

    .top-type {
      width: 100%;
      height: 100%;
      // .btn-area{
      //   margin-bottom: 10px;
      // }
      table {
        max-width: 100%;
        font-size: 1.4rem;
      }
    }

    .bottom-code {
      width: 100%;
      height: 100%;
    }
  }

  .codeNumberCode {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 40px;
  }

  .botTable {
    .botTableTitle {
      font-weight: bold;
      padding-left: 10px;
      /*margin-bottom: 10px;*/
      margin-top: -50px;
      margin-bottom: 50px;
      font-size: 15px;
    }
  }
</style>
